<template>
  <div class="echarts">
    <ECharts :option="option" />
  </div>
</template>

<script setup lang="js" name="cure">
import ECharts from "@/components/ECharts/index.vue";
import { defineProps, ref, onMounted, watch } from "vue";

// 定义接收的 props
const props = defineProps({
  curveData: Array
});

const option = ref({
  tooltip: {
    trigger: "axis",
    backgroundColor: "transparent",
    axisPointer: {
      type: "none"
    },
    padding: 0,
    formatter: p => {
      let dom = `<div style="width:100%; height: 150px !important; display:flex;flex-direction: column;justify-content: space-between;padding:15px;box-sizing: border-box;
      color:#fff; background: #6B9DFE;border-radius: 4px;font-size:14px; ">
        <div style="display: flex; align-items: center;"> <div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>名称 :  ${p[0].name}</div>
        <div style="display: flex;align-items: center;"><div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>漏检次数 :  ${p[0].value}</div>
        <div style="display: flex;align-items: center;"><div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>异常次数 :  ${p[1].value}</div>
        <div style="display: flex;align-items: center;"><div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>不合格数 :  ${p[2].value}</div>
        <div style="display: flex;align-items: center;"><div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>完成数 :  ${p[3].value}</div>
      </div>`;
      return dom;
    }
  },
  toolbox: {
    show: true,
    orient: "horizontal"
  },
  grid: {
    left: "0",
    right: "0"
  },
  dataZoom: [
    {
      show: false,
      height: 10,
      xAxisIndex: [0],
      bottom: 0,
      startValue: 0,
      endValue: 5,
      handleStyle: {
        color: "#6b9dfe"
      },
      textStyle: {
        color: "transparent"
      }
    },
    {
      type: "inside",
      show: true,
      height: 0,
      zoomLock: true
    }
  ],
  legend: {
    data: ["漏检次数", "异常次数", "不合格数", "完成次数"],
    bottom: 0,
    textStyle: {
      color: "#a1a1a1",
      fontSize: 14
    }
  },
  xAxis: [
    {
      type: "category",
      data: props.curveData.map(val => {
        return val.teamName;
      }),
      axisTick: {
        show: false
      },
      axisLabel: {
        margin: 20,
        interval: 0,
        color: "#a1a1a1",
        fontSize: 14,
        formatter: function (name) {
          return name.length > 8 ? name.slice(0, 8) + "..." : name;
        }
      },
      axisLine: {
        lineStyle: {
          color: "#c0c0c0"
        }
      }
    }
  ],
  yAxis: [
    {
      min: 0,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#c0c0c0"
        }
      },
      axisLabel: {
        color: "#a1a1a1",
        fontSize: 16,
        fontWeight: 400,
        formatter: function (value) {
          if (value === 0) {
            return value + "";
          } else if (value >= 10000) {
            return value / 10000 + "w";
          }
          return value + "";
        }
      }
    }
  ],
  series: [
    {
      name: "漏检次数",
      type: "bar",
      data: props.curveData.map(val => val.missed),
      barWidth: "16%",
      itemStyle: {
        color: "#feb791"
      },
      emphasis: {
        itemStyle: {
          color: "#fe8b4c"
        }
      },
      label: {
        show: true,
        position: "top", // 标签的位置
        // 格式化标签内容
        formatter: function (params) {
          return params.value;
        }
      }
    },
    {
      name: "异常次数",
      type: "bar",
      data: props.curveData.map(val => val.exception),
      barWidth: "16%",
      itemStyle: {
        color: "#b898fd"
      },
      emphasis: {
        itemStyle: {
          color: "#8347fd"
        }
      },
      label: {
        show: true,
        position: "top",
        formatter: function (params) {
          return params.value;
        }
      }
    },
    {
      name: "不合格数",
      type: "bar",
      data: props.curveData.map(val => val.unqualified),
      barWidth: "16%",
      itemStyle: {
        color: "#C5D8FF"
      },
      emphasis: {
        itemStyle: {
          color: "#6B9DFE"
        }
      },
      label: {
        show: true,
        position: "top",
        formatter: function (params) {
          return params.value;
        }
      }
    },
    {
      name: "完成次数",
      type: "bar",
      data: props.curveData.map(val => val.finish),
      barWidth: "16%",
      itemStyle: {
        color: "#90EE90"
      },
      emphasis: {
        itemStyle: {
          color: "#4CAF50"
        }
      },
      label: {
        show: true,
        position: "top",
        formatter: function (params) {
          return params.value;
        }
      }
    }
  ]
});

const updateOption = curveData => {
  option.value = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "transparent",
      axisPointer: {
        type: "none"
      },
      padding: 0,
      formatter: p => {
        let dom = `<div style="width:100%; height: 150px !important; display:flex;flex-direction: column;justify-content: space-between;padding:15px;box-sizing: border-box;
      color:#fff; background: #6B9DFE;border-radius: 4px;font-size:14px; ">
        <div style="display: flex; align-items: center;"> <div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>名称 :  ${p[0].name}</div>
        <div style="display: flex;align-items: center;"><div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>漏检次数 :  ${p[0].value}</div>
        <div style="display: flex;align-items: center;"><div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>异常次数 :  ${p[1].value}</div>
        <div style="display: flex;align-items: center;"><div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>不合格数 :  ${p[2].value}</div>
        <div style="display: flex;align-items: center;"><div style="width:5px;height:5px;background:#ffffff;border-radius: 50%;margin-right:5px"></div>完成数 :  ${p[3].value}</div>
      </div>`;
        return dom;
      }
    },
    toolbox: {
      show: true,
      orient: "horizontal"
    },
    grid: {
      left: "0",
      right: "0"
    },
    dataZoom: [
      {
        show: false,
        height: 10,
        xAxisIndex: [0],
        bottom: 0,
        startValue: 0,
        endValue: 5,
        handleStyle: {
          color: "#6b9dfe"
        },
        textStyle: {
          color: "transparent"
        }
      },
      {
        type: "inside",
        show: true,
        height: 0,
        zoomLock: true
      }
    ],
    legend: {
      data: ["漏检次数", "异常次数", "不合格数", "完成次数"],
      bottom: 0,
      textStyle: {
        color: "#a1a1a1",
        fontSize: 14
      }
    },
    xAxis: [
      {
        type: "category",
        data: curveData.map(val => {
          return val.teamName;
        }),
        axisTick: {
          show: false
        },
        axisLabel: {
          margin: 20,
          interval: 0,
          color: "#a1a1a1",
          fontSize: 14,
          formatter: function (name) {
            return name.length > 8 ? name.slice(0, 8) + "..." : name;
          }
        },
        axisLine: {
          lineStyle: {
            color: "#c0c0c0"
          }
        }
      }
    ],
    yAxis: [
      {
        min: 0,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#c0c0c0"
          }
        },
        axisLabel: {
          color: "#a1a1a1",
          fontSize: 16,
          fontWeight: 400,
          formatter: function (value) {
            if (value === 0) {
              return value + "";
            } else if (value >= 10000) {
              return value / 10000 + "w";
            }
            return value + "";
          }
        }
      }
    ],
    series: [
      {
        name: "漏检次数",
        type: "bar",
        data: props.curveData.map(val => val.missed),
        barWidth: "16%",
        itemStyle: {
          color: "#feb791"
        },
        emphasis: {
          itemStyle: {
            color: "#fe8b4c"
          }
        },
        label: {
          show: true,
          position: "top", // 标签的位置
          // 格式化标签内容
          formatter: function (params) {
            return params.value;
          }
        }
      },
      {
        name: "异常次数",
        type: "bar",
        data: props.curveData.map(val => val.exception),
        barWidth: "16%",
        itemStyle: {
          color: "#b898fd"
        },
        emphasis: {
          itemStyle: {
            color: "#8347fd"
          }
        },
        label: {
          show: true,
          position: "top",
          formatter: function (params) {
            return params.value;
          }
        }
      },
      {
        name: "不合格数",
        type: "bar",
        data: props.curveData.map(val => val.unqualified),
        barWidth: "16%",
        itemStyle: {
          color: "#C5D8FF"
        },
        emphasis: {
          itemStyle: {
            color: "#6B9DFE"
          }
        },
        label: {
          show: true,
          position: "top",
          formatter: function (params) {
            return params.value;
          }
        }
      },
      {
        name: "完成次数",
        type: "bar",
        data: props.curveData.map(val => val.finish),
        barWidth: "16%",
        itemStyle: {
          color: "#90EE90"
        },
        emphasis: {
          itemStyle: {
            color: "#4CAF50"
          }
        },
        label: {
          show: true,
          position: "top",
          formatter: function (params) {
            return params.value;
          }
        }
      }
    ]
  };
};

onMounted(() => {
  console.log("Component2 is mounted.");
  console.log("Received pieData from parent:", props.curveData);
  updateOption(props.curveData);
});

watch(
  () => props.curveData,
  newVal => {
    console.log("curveData updated", newVal);
    updateOption(props.curveData);
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
